<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
  <script src="../packages/reactivity/dist/reactivity.global.js"></script>
  <script>
    const { reactive, readonly, toRaw, markRaw, effect, ref} = VueReactivity
    // proxy劫持
    // 1. 触发get收集依赖
    // symbol是不需要收集的、原型属性也不收集
    // shallow的不需要递归
    // 如果值是ref 会被解包会进行解包
    state.name 

    // 2. 重写数组里的方法：includes、indexOf、lastIndexOf、pop、push、shift、splice、unshift等
    const data = {name: 'jw'}  
    const arr = reactive([data]) // 对象套对象会递归代理
    console.log(arr[0] === data) // 所以在这里访问arr[0]获取的是代理对象
    console.log(arr.includes(data)) // 正常情况下不应该为true，因为data是源对象，所以要重写includes方法可以同时检测源对象和代理对象

    // 3. 内置symbol的处理、__proto__、__v_isRef,__isVue(vue实例) 这些不处理

    // 4. 不支持脱ref的情况
    const proxyArr = reactive([ref(1), 2, 3])
    console.log(proxyArr[0]) // 数组里的ref不支持脱ref，方便数组不通过索引来赋值

    let obj = reactive({name: ref('zf')})
    console.log(obj.name) // 对象可以脱ref


  </script>
</body>
</html>